{include file="common/header"}
<link href="/static/admin/css/chats.css" rel="stylesheet">
<main class="lyear-layout-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-32 left-chat-lists-show">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" href="#tab-1">{:lang('chats.current_dialogue')}</a>
                    </li>
                    <li class="nav-item">
                        <a data-toggle="tab" href="#tab-2">{:lang('chats.Line_up_the_list')}</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="tab-1">
                        <ul class="list-group"></ul>
                    </div>
                    <div class="tab-pane fade" id="tab-2">

                    </div>
                </div>
            </div>
            <div class="col-md-62">
                <div class="chatbox hide">
                    <div id="wrap">
                        <div id="top_div" class="showtime" page="1" sw="on">{:lang('chats.the_no_data')}</div>
                        <ul class="conversation"></ul>
                    </div>
                    <div class="footer">
                        <ul id="reply_tip"></ul>
                        <div class="msg-toolbar">
                            {if $options['set_attachment_kfsc'] == 1}
                            {if $options['set_attachment_tpsc'] == 1}
                            <a data-toggle="tooltip" data-placement="top" data-original-title="{:lang('chats.send_image')}">
                                <form id="upload_img" enctype="multipart/form-data">
                                    <div class="am-form-group am-form-file">
                                        <i class="iconfont icon-tupian"></i>
                                        <input type="file" name="upload_img" accept="{:get_img_accept($options['set_attachment_tpgs'])}">
                                    </div>
                                </form>
                            </a>
                            {/if}
                            {if $options['set_attachment_wjsc'] == 1}
                            <a data-toggle="tooltip" data-placement="top" data-original-title="{:lang('chats.send_file')}">
                                <form id="upload_file" enctype="multipart/form-data">
                                    <div class="am-form-group am-form-file">
                                        <i class="iconfont icon-icon-1"></i>
                                        <input type="file" name="upload_file" accept="{$options['set_attachment_wjgs']}">
                                    </div>
                                </form>
                            </a>
                            {/if}
                            {/if}
                            <a data-toggle="tooltip" data-placement="top" data-original-title="{:lang('chats.add_blacklist')}">
                                <i class="iconfont icon-heimingdan" id="blacklist"></i>
                            </a>
                            <a data-toggle="tooltip" data-placement="top" data-original-title="{:lang('chats.expression_library')}" id="face_icon" onclick="faceon()">
                                <i class="iconfont icon-biaoqing"></i>
                            </a>
                            <a data-toggle="tooltip" data-placement="top" data-original-title="{:lang('chats.voice')}" onclick="getaudio()">
                                <i class="iconfont icon-yuyin"></i>
                            </a>
                            <a class="mdi-comment-processing" data-toggle="tooltip" data-placement="top" data-original-title="{:lang('chats.fast_reply')}">
                                <i class="iconfont icon-008duihuakuang-2"></i>
                            </a>
                            <a class="transfer_service" data-toggle="tooltip" data-placement="top" data-original-title="{:lang('chats.transfer_service')}">
                                <i class="iconfont icon-zhuandan"></i>
                            </a>
                            <a class="historical_record" data-toggle="tooltip" data-placement="top" data-original-title="{:lang('chats.historical_record')}">
                                <i class="iconfont icon-lishishuju"></i>
                            </a>
                            {if $customerpay}
                            <a class="alipay" data-toggle="tooltip" data-placement="top" data-original-title="客服收款">
                                <i class="iconfont" style="font-size:18px;">收</i>
                            </a>
                            {/if}
                        </div>
                        <div class="tool_box" style="display:none;">
                            <div class="wl_faces_content">
                                <div class="wl_faces_main">
                                    <ul></ul>
                                </div>
                            </div>
                        </div>
                        <div class="msg-input">
                            <div class="input-box">
                                <div id="text_in" class="edit-ipt" contenteditable="true" hidefocus="true"></div>
                            </div>
                        </div>
                    </div>
                    <div id="fuceng" class="fuceng">
                        <ul>
                            <li class="fuceng-li" id="type1" type="1">
                                <img class="layui-icon" src="/static/index/imgs/selected.png">
                                <span>{:lang('public.Enter Ctrl+Enter')}</span>
                            </li>
                            <li class="fuceng-li" id="type2" type="2">
                                <img class="layui-icon" src="/static/index/imgs/selected.png">
                                <span>{:lang('public.Ctrl+Enter Enter')}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="msg-toolbar-footer">
                        <div class="abs br pnl-btn">
                            <a id="send" class="layui-btn">{:lang('chats.send_to_send')}</a>
                            <a id="showinfo" class="showinfo">
                                <img src="/static/index/imgs/up-menu.png">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="pages-empty-box">
                    <div class="business-empty-index">
                        <div class="chat__-_-modules-component-src-business-empty-index__content">
                            <svg id="ecoboost-iconfontemptypag_chat_02" viewBox="0 0 1024 1024"><path d="M493.268293 187.317073c200.010927 0 362.146341 162.135415 362.146341 362.146342s-162.135415 362.146341-362.146341 362.146341-362.146341-162.135415-362.146342-362.146341 162.135415-362.146341 362.146342-362.146342z" fill="#1880FF" opacity=".3"></path><path d="M525.661659 596.430049c-2.903415-3.821268-2.903415-8.59161-2.903415-14.323512 0-1.910634 0.967805-4.776585 1.93561-6.680976l0.967805-1.910634c0.967805-1.910634 4.839024-11.457561 7.742439-17.189464 0-0.955317 1.93561-3.821268 3.871219-5.725658 2.897171-1.910634 5.806829-4.776585 10.63961-10.502244 7.742439-11.463805 3.87122-21.959805-2.903415-26.73639v-1.910634c3.87122-10.502244 5.806829-22.915122 4.839025-38.193952-0.967805-16.234146-16.446439-41.053659-56.120196-41.053658-39.667512 0-55.146146 23.870439-56.113951 41.053658-0.967805 15.278829 0.967805 27.691707 4.839025 37.238635v1.910634c-6.774634 5.731902-9.678049 16.234146-2.903415 27.691707a35.921171 35.921171 0 0 0 10.63961 10.502244c1.93561 1.90439 3.87122 4.770341 3.871219 5.725658 2.903415 5.731902 6.774634 14.323512 7.742439 17.189464l0.967805 1.910634c0.961561 2.859707 1.93561 4.770341 1.93561 6.680976 0 4.776585 0 10.502244-2.903415 14.323512-2.903415 3.815024-19.356098 21.959805-52.248975 29.596097-29.027902 6.680976-47.409951 11.457561-47.409952 41.059903 0 1.910634 46.442146 39.848585 131.10322 39.848585 84.661073 0 131.10322-36.982634 131.103219-39.848585 0.967805-29.596098-16.452683-34.372683-46.442146-41.059903-32.899122-7.636293-49.345561-25.781073-52.248975-29.596097z" fill="#FFFFFF"></path><path d="M936.585366 112.390244v274.731707h-247.552L624.390244 437.073171v-49.95122H549.463415V112.390244h387.121951z" fill="#1880FF" opacity=".2"></path><path d="M743.02439 256m-24.97561 0a24.97561 24.97561 0 1 0 49.95122 0 24.97561 24.97561 0 1 0-49.95122 0Z" fill="#FFFFFF"></path><path d="M830.439024 256m-24.975609 0a24.97561 24.97561 0 1 0 49.951219 0 24.97561 24.97561 0 1 0-49.951219 0Z" fill="#FFFFFF"></path><path d="M655.609756 256m-24.97561 0a24.97561 24.97561 0 1 0 49.95122 0 24.97561 24.97561 0 1 0-49.95122 0Z" fill="#FFFFFF"></path></svg>
                            <div class="chat__-_-modules-component-src-business-empty-index__title">{:lang('chats.no_selected_dialogue')}</div>
                            <div class="chat__-_-modules-component-src-business-empty-index__desc" style="padding-top: 8px;">{:lang('chats.no_dialogue_rest')}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-42 right-chat-lists-show">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a data-toggle="tab" href="#tab-3">{:lang('chats.customer_information')}</a>
                    </li>
                    <li class="nav-item">
                        <a data-toggle="tab" href="#tab-4">{:lang('chats.blacklist')}</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade active in" id="tab-3">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="client-avatar-tag-index__box">
                                    <div class="index__avatar-box">
                                        <div class="index__avatar-box avatar-box">
                                            <img class="my-circle se_pic" src="/images/avatar/default-avatar.jpg" width="50px" height="50px">
                                        </div>
                                        <span class="index__avatar-name" id="basic-nick">{:lang('chats.customer')}</span>
                                    </div>
                                </div>
                                <div class="card-body guke-list-info">
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('chats.source')}</span>
                                        <p>
                                            <a id="basic-source" href="" target="_blank">{:lang('chats.no')}</a>
                                        </p>
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('chats.city')}</span>
                                        <p id="basic-city">{:lang('chats.no')}</p>
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('public.ip')}</span>
                                        <p id="basic-ip">{:lang('chats.no')}</p>
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('chats.state')}</span>
                                        <p id="basic-state">{:lang('chats.no')}</p>
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('chats.time')}</span>
                                        <p id="basic-last_time">{:lang('chats.no')}</p>
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('chats.views')}</span>
                                        <p id="basic-views">{:lang('chats.no')}</p>
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('chats.equi')}</span>
                                        <p id="basic-equi">{:lang('chats.no')}</p>
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('public.name')}</span>
                                        <input type="text" class="form-control" id="basic-name" val="name">
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('public.phone')}</span>
                                        <input type="text" class="form-control" id="basic-phone" val="phone">
                                    </div>
                                    <div class="input-group m-b-10">
                                        <span class="input-group-addon">{:lang('chats.note')}</span>
                                        <input type="text" class="form-control" id="basic-note" val="note">
                                    </div>
                                    <input type="hidden" id="basic-id">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab-4"></div>
                </div>
            </div>
            <span class="left-chat-lists-bar hide">
                <i class="iconfont icon-pinglun3"></i>
            </span>
            <span class="right-chat-lists-bar hide">
                <i class="iconfont icon-gerenziliao"></i>
            </span>
        </div>
    </div>
</main>
<div class="modal fade" id="plusgroupModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">{:lang('chats.add_group')}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <form id="addGroup">
                            <div class="form-group">
                                <label class="control-label">{:lang('chats.group_name')}</label>
                                <input type="text" class="form-control" id="group-name-add">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="we_im_addGroup(this);">{:lang('public.determine')}</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">{:lang('public.cancel')}</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="plusreplyModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="width: 660px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">{:lang('chats.add_quick_reply')}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <form id="addReply">
                            <div class="form-group">
                                <label class="control-label" style="margin-bottom:10px;">{:lang('chats.brief_name')}</label>
                                <input type="text" class="form-control" id="reply-title-add" style="width:100%;">
                            </div>
                            <div class="form-group">
                                <label class="control-label" style="margin-bottom:10px;margin-top:10px;">{:lang('chats.reply_content')}</label>
                                <textarea style="display:none;"></textarea>
                                <div id="reply-content"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="we_im_addReply(this);">{:lang('public.determine')}</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">{:lang('public.cancel')}</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editreplyModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document" style="width: 660px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">{:lang('chats.edit_fast_reply')}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <form id="editReply">
                            <div class="form-group">
                                <label class="control-label" style="margin-bottom:10px;">{:lang('chats.brief_name')}</label>
                                <input type="text" class="form-control" id="reply-title-edit" style="width:100%;">
                            </div>
                            <div class="form-group">
                                <label class="control-label" style="margin-bottom:10px;margin-top:10px;">{:lang('chats.Reply_content')}</label>
                                <textarea style="display:none;"></textarea>
                                <div id="reply-content"></div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="we_im_editReply(this);">{:lang('public.edit')}</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">{:lang('public.cancel')}</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="editgroupModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">{:lang('chats.edit_group')}</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <form id="editGroup">
                            <div class="form-group">
                                <label class="control-label">{:lang('chats.group_name')}</label>
                                <input type="text" class="form-control" id="group-name-edit">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="we_im_editGroup(this);">{:lang('public.edit')}</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">{:lang('public.cancel')}</button>
            </div>
        </div>
    </div>
</div>
<div class="ant-drawer ant-drawer-right chat_src-pages-chat-index__visitor-drawer">
    <div class="ant-drawer-mask"></div>
    <div class="ant-drawer-content-wrapper">
        <div class="ant-drawer-content">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-header">
                            <h4>{:lang('chats.fast_reply')}</h4>
                        </div>
                        <div class="panel-group plusgroup" id="accordion" role="tablist" aria-multiselectable="true"></div>
                        <div class="list-group-p">
                            <p data-toggle="modal" data-target="#plusgroupModal"><i class="iconfont icon-plus-line"></i> {:lang('chats.add_group')}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="common/footer"}
<script type="text/javascript">
    let IM_config = {
        addgroup: "{:adminUrl('admin/Chats/addGroup')}",
        addreply: "{:adminUrl('admin/Chats/addReply')}",
        editgroup: "{:adminUrl('admin/Chats/editGroup')}",
        editreply: "{:adminUrl('admin/Chats/editReply')}",
        delgroup: "{:apiUrl('api/Chats/delGroup')}",
        delreply: "{:apiUrl('api/Chats/delReply')}",
        getgrouplist: "{:apiUrl('api/Chats/getGroupList')}",
        getreplylist: "{:apiUrl('api/Chats/getReplyList')}",
        uploadimg: "{:apiUrl('api/Upload/img')}",
        ajaxupfile: "{:apiUrl('api/Upload/ajaxupfile')}",
        ajaxupaudio: "{:apiUrl('api/Upload/ajaxupaudio')}",
        loadRecordLists: "{:apiUrl('api/Chats/loadRecordLists')}",
        getVisitors: "{:apiUrl('api/Chats/getVisitors')}",
        getIpinfo: "{:apiUrl('api/Chats/getIpinfo')}",
        updateVisitors: "{:adminUrl('admin/Chats/updateVisitors')}",
        joinBlacklist: "{:adminUrl('admin/Chats/joinBlacklist')}",
        getBlacklist: "{:apiUrl('api/Chats/getBlacklist')}",
        delBlacklist: "{:adminUrl('admin/Chats/delBlacklist')}",
        updateCustomerState: "{:adminUrl('admin/Chats/updateCustomerState')}",
        OneHistoryPage: "{:adminUrl('admin/Chats/onehistory')}",
        getCustomerLists: "{:apiUrl('api/Chats/getCustomerLists')}",
        delDialogue: "{:adminUrl('admin/Chats/delDialogue')}",
        transfer:"{:adminUrl('admin/Chats/transfer')}",
        hook:"{:apiUrl('api/Hook/index')}",
        customerpay:"{:addons_url('customerpay://Index/pay')}",
        unread:"{:apiUrl('api/Unread/index')}",
    };
</script>
<script type="text/javascript" src="/static/index/js/cookie.min.js"></script>
<script type="text/javascript" src="/static/common/js/common.js"></script>
<script type="text/javascript" src="/static/admin/js/wangEditor.min.js"></script>
<script type="text/javascript" src="/static/common/js/recordmp3.js"></script>
<script type="text/javascript" src="/static/common/js/faces.js"></script>
<script type="text/javascript" src="/static/admin/js/socket.js"></script>
<script type="text/javascript" src="/static/admin/js/chats.js"></script>

